<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" id="valueInput" value="你好">
        <!-- <button id="starts">开始</button>
        <button id="ends">结束</button> -->
        <!-- <button onclick="start()" class="startBtn">开始说话</button>
        <br />
        <button onclick="end()" class="endBtn">结束并转换普通话</button> -->
        <button onclick="sends()">发送</button>
        <br>
        <textarea name="" id="textarea" cols="30" rows="10"></textarea>
    </div>

    <script>
        let abortController, output;
        let msg = new SpeechSynthesisUtterance();
        msg.lang = 'zh'; //汉语
        msg.volume = 50; // 声音的音量
        msg.rate = 1.2; //语速，数值，默认值是1，范围是0.1到10
        msg.pitch = 1.5; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
        function sends() {
            const valmensage = document.querySelector('#valueInput')
            // console.log(valmensage.value);
            getGPT(valmensage.value)
        }
        // 获取请求
        const getGPT = async (message) => {
            if (abortController) {
                abortController.abort() // 取消当前请求
            }
            abortController = new AbortController() // 创建新的 AbortController
            try {
                let result = ''
                // output.value = '请求中...'
                const res = await fetch('http://127.0.0.1:8081/api/chat', {
                    method: "POST",
                    body: JSON.stringify({
                        message
                    }),
                    headers: {
                        "Content-Type": "application/json"
                    },
                    signal: abortController.signal // 绑定 AbortSignal 到请求
                })
                if (res.body == null) {
                    return
                }
                const reader = res.body.getReader()
                const decoder = new TextDecoder("utf-8")
                let str = ''
                while (true) {
                    const { value, done } = await reader.read()
                    const dataString = decoder.decode(value)
                    str += dataString
                    document.querySelector('#textarea').value = str
                    if (done) {
                        break
                    }
                }
                msg.text = str
                speechSynthesis.speak(msg);
            } catch (error) {

            }

        }
        // navigator.mediaDevices.getUserMedia({ audio: true })
        //     .then(function (stream) {
        //         console.log(stream);
        //         const mediaRecorder = new MediaRecorder(stream);
        //         let chunks = [];
        //         let audios = []
        //         mediaRecorder.addEventListener('dataavailable', function (e) {
        //             console.log(e.data);
        //             chunks.push(e.data);
        //         });

        //         mediaRecorder.addEventListener('stop', function () {
        //             const blob = new Blob(chunks, { type: 'audio/webm' });
        //             const url = URL.createObjectURL(blob);
        //             const audio = new Audio(url);
        //             audio.play();

        //             const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
        //             console.log(recognition);
        //             recognition.lang = 'zh-CN';
        //             recognition.onresult = function (event) {
        //                 const result = event.results[0][0].transcript;
        //                 console.log(result);
        //             };
        //             recognition.start();
        //             // recognition.onsoundstart = function (e) {
        //             //     console.log("开始收听了");
        //             //     console.log(e);
        //             // }

        //             // recognition.onspeechstart = (e) => {
        //             //     console.log("开始讲话了");
        //             //     audios.push(e.data);
        //             //     console.log(e);
        //             // }

        //             // recognition.onspeechend = (e) => {
        //             //     console.log("讲话完毕");
        //             //     console.log(e);
        //             //     const blob = new Blob(audios, { type: 'audio/webm' });
        //             //     const url = URL.createObjectURL(blob);
        //             //     const audio = new Audio(url);
        //             //     audio.play();
        //             // }

        //             // recognition.onerror = (e) => {
        //             //     console.log("发生异常");
        //             //     console.log(e);
        //             // }
        //         });
        //         document.getElementById('starts').onclick = () => {
        //             mediaRecorder.start();
        //         }

        //         document.getElementById('ends').onclick = () => {
        //             mediaRecorder.stop();
        //         }

        //         // const duration = 5000;
        //         // setTimeout(function () {
        //         //     mediaRecorder.stop();
        //         // }, duration);
        //     })
        //     .catch(function (error) {
        //         console.error('录音失败：', error);
        //     });

        // 实现录音
        const hanCahngeVie = async () => {

        }
        // let recognition = new webkitSpeechRecognition() || new SpeechRecognition();
        // recognition.continuous = true;  //识别到声音就关闭，还是一直识别
        // console.log(recognition)
        // recognition.lang = 'cmn-Hans-CN'; //定义普通话 (中国大陆)
        // function start() {
        //     console.log('start')
        //     // 开启
        //     recognition.continuous = true;
        //     recognition.start();
        // }
        // function end() {
        //     console.log('end')
        //     // 停止
        //     recognition.stop();
        //     recognition.continuous = false;
        // }
        // // 当调用recognition的stop的时候会触发此对象的onresult事件，然后我们在这里获取我们的转换结果。
        // recognition.onresult = function (event) {
        //     console.log(event);
        //     alert(event.results[0][0].transcript);
        //     // console.log(event)
        //     console.log(event.results[0][0].transcript)
        // }


        // recognition.onsoundstart = function (e) {
        //     console.log("开始收听了");
        //     console.log(e);
        // }

        // recognition.onspeechstart = (e) => {
        //     console.log("开始讲话了");
        //     console.log(e);
        // }

        // recognition.onspeechend = (e) => {
        //     console.log("讲话完毕");
        //     console.log(e);
        // }

        // recognition.onerror = (e) => {
        //     console.log("发生异常");
        //     console.log(e);
        // }


    </script>
</body>

</html>